<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web3项目汇总</title>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, sans-serif;
        background-color: #2c2f33;
        color: #e0e0e0;
        margin: 0;
        padding: 0;
    }
    header {
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(90deg, #23272a, #2f3136);
        color: #f8f9fa;
        padding: 15px 25px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .controls {
        margin: 20px;
        text-align: right;
    }
    .controls input, .controls button {
        padding: 10px;
        margin: 0 5px;
        border: 1px solid #444;
        background: #23272a;
        color: #e0e0e0;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
    }
    table {
        width: 95%;
        margin: auto;
        border-collapse: separate;
        border-spacing: 0;
        background-color: #2f3136;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        border-radius: 15px;
        overflow: hidden;
    }
    th, td {
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid #444;
    }
    th {
        background: linear-gradient(90deg, #40444b, #2f3136);
        color: #f8f9fa;
        font-weight: bold;
        cursor: pointer;
    }
    tr:hover {
        background-color: #3a3e44;
    }
    img {
        max-width: 40px;
        height: auto;
        border-radius: 8px;
    }
    .pagination {
        text-align: center;
        margin: 20px;
    }
    .pagination button {
        padding: 8px 12px;
        margin: 0 3px;
        border: none;
        background: linear-gradient(90deg, #5865f2, #4752c4);
        color: white;
        cursor: pointer;
        border-radius: 20px;
        transition: background-color 0.2s;
    }
    .pagination button:hover {
        background: linear-gradient(90deg, #4752c4, #3641b7);
    }
</style>
</head>
<body>
<header>
    <h1>Web3项目汇总</h1>
</header>
<div class="controls">
    <button onclick="sortProjects('name')">按名称排序</button>
    <button onclick="sortProjects('time')">按时间排序</button>
    <input type="text" id="searchInput" placeholder="搜索项目..." onkeyup="searchTable()">
</div>
<table id="projectTable">
    <thead>
        <tr>
            <th>序号</th>
            <th>项目名称</th>
            <th>项目地址</th>
            <th>项目Logo</th>
            <th>项目推特</th>
            <th>项目Discord</th>
            <th>项目教程</th>
            <th>项目融资</th>
            <th>项目归属地</th>
            <th>空投领取地址</th>
            <th>信息更新时间</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<div class="pagination" id="pagination"></div>
<script>
    let projects = [
        {
            name: '示例项目',
            website: '#',
            logo: 'https://via.placeholder.com/40',
            twitter: '#',
            discord: '#',
            tutorial: '#',
            funding: '1000万美金',
            location: '新加坡',
            airdrop: '#',
            updated: '2025-08-05'
        }
    ];

    let rowsPerPage = 10; // 固定每页展示条数
    let currentPage = 1;
    const tbody = document.querySelector('#projectTable tbody');

    function renderTable() {
        tbody.innerHTML = '';
        projects.forEach((project, index) => {
            const row = `<tr>
                <td>${index + 1}</td>
                <td>${project.name}</td>
                <td><a href="${project.website}" target="_blank" style="color:#00aff4">官网</a></td>
                <td><img src="${project.logo}" alt="logo"></td>
                <td><a href="${project.twitter}" target="_blank" style="color:#00aff4">Twitter</a></td>
                <td><a href="${project.discord}" target="_blank" style="color:#00aff4">Discord</a></td>
                <td><a href="${project.tutorial}" target="_blank" style="color:#00aff4">教程</a></td>
                <td>${project.funding}</td>
                <td>${project.location}</td>
                <td><a href="${project.airdrop}" target="_blank" style="color:#00aff4">领取</a></td>
                <td>${project.updated}</td>
            </tr>`;
            tbody.insertAdjacentHTML('beforeend', row);
        });
        paginateTable();
    }

    function paginateTable() {
        const rows = tbody.getElementsByTagName('tr');
        const totalRows = rows.length;
        const totalPages = Math.ceil(totalRows / rowsPerPage);

        for (let i = 0; i < totalRows; i++) {
            rows[i].style.display = (i >= (currentPage - 1) * rowsPerPage && i < currentPage * rowsPerPage) ? '' : 'none';
        }

        const pagination = document.getElementById('pagination');
        pagination.innerHTML = '';
        for (let i = 1; i <= totalPages; i++) {
            const button = document.createElement('button');
            button.textContent = i;
            button.onclick = () => { currentPage = i; paginateTable(); };
            if (i === currentPage) button.style.background = 'linear-gradient(90deg, #4752c4, #3641b7)';
            pagination.appendChild(button);
        }
    }

    function searchTable() {
        const filter = document.getElementById('searchInput').value.toLowerCase();
        const rows = tbody.getElementsByTagName('tr');
        for (let i = 0; i < rows.length; i++) {
            const cells = rows[i].getElementsByTagName('td');
            let match = false;
            for (let j = 0; j < cells.length; j++) {
                if (cells[j].innerText.toLowerCase().includes(filter)) {
                    match = true;
                    break;
                }
            }
            rows[i].style.display = match ? '' : 'none';
        }
    }

    function sortProjects(type) {
        if (type === 'name') {
            projects.sort((a, b) => a.name.localeCompare(b.name));
        } else if (type === 'time') {
            projects.sort((a, b) => new Date(b.updated) - new Date(a.updated));
        }
        renderTable();
    }

    renderTable();
</script>
</body>
</html>
